<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.3/vue.min.js"
    integrity="sha512-cH1Ej4JIqdLIap1BvDncAbRCkbl+63RW1hZqoeDjK1MfQtCHYXBkVgBoaHuvZjZRzMdtfjnsaRmzzucdmfL8zg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <title>Document</title>
  <script src="../../font/iconfont.js"></script>
  <style>
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }

    .app-item {
      padding: 20px;
    }
  </style>

</head>
<!-- 通过这样的一个手法,来让我的代码变可以很react的方式一样,进行这样的操作 -->
<body>
  <div id="app">
    <div class="app-item">
      <Heading level="1" icon="gou" title="我就是一个title">
        我可以自动添加图标
      </Heading>
    </div>
  </div>
  <script>
    Vue.component('heading', {
      functional: true,
      render(h, context) {
        let children = []
        const { icon, level, title }= context.props
        if (icon) {
          children.push(h('svg', { class: 'icon' }, [h('use', { attrs: { 'xlink:href': '#icon-' + icon }})]))
        }
        children = children.concat(context.children)
        return h(
          "h" + level,
          { attrs: { title } },
          children
        )
      },
    })
    const app = new Vue({
      el: '#app',
      data() {
        return {
          name: 'xjh'
        }
      }
    })
  </script>
</body>

</html>